three.js学习 开始尝试使用

three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能，能够显示3d模型，这里来学习一下three.js基本使用。

安装Node.js

先确定电脑安装了Node.js

初始化项目

npm init -y

生成package.json

three.js学习 开始尝试使用_threejs

npm install three

在项目中安装下载three依赖包 

three.js学习 开始尝试使用_WebGL_02

three.js学习 开始尝试使用_three.js_03

打开package.json可以看到下载了最新的three为0.169.0

代码

在这个工程目录增加一个demo文件夹

在demo文件夹中新建一个demo1.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - GLTFloader + transmission</title>
    <meta charset="utf-8">     
</head>
<body>
<script type="importmap">
	{
        "imports": {
            "three": "../node_modules/three/build/three.module.js",
            "three/addons/": "../node_modules/three/examples/jsm"
        }
	}
</script>
<script type="module">
    import * as THREE from 'three';
    import {OrbitControls} from '../node_modules/three/examples/jsm/controls/OrbitControls.js';
    //three.js版本号
    //console.log(THREE.REVISION);
    //场景
    const scene = new THREE.Scene();
	scene.background = new THREE.Color(0xDDE3E9);   
	 
    //平面几何体
    const planGeometry = new THREE.PlaneGeometry(200, 200);
    //平面几何体材质    
    const planMaterial = new THREE.MeshPhongMaterial({color: 0xEFEFEF});
    //平面
    const plan = new THREE.Mesh(planGeometry, planMaterial);
    plan.position.set(0, 0, 0);
    plan.rotation.x = -Math.PI / 2;
    
    //接收阴影的物体要开启材质是否接收阴影 
    plan.receiveShadow = true;
    scene.add(plan);
    
    //辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(10)
    scene.add(axesHelper);

    //环境光    
    const ambient = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambient);
    
    //平行光
    var directionLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionLight.position.set(-100, 100, -100);
    directionLight.castShadow = true; //是否显示阴影  
    directionLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
    //平行光计算阴影的范围
    directionLight.shadow.camera.left = -50;
    directionLight.shadow.camera.right = 50;
     = 200;
    directionLight.shadow.camera.bottom = -100;
    directionLight.shadow.camera.near = 0.5;
    directionLight.shadow.camera.far = 600;

    scene.add(directionLight);

    //立方体
    const cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
    const cubeMaterial = new THREE.MeshBasicMaterial({'color': 0x0000FF});
    const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cubeMesh.position.set(-10, 20, 0);
    console.log(cubeMesh.position);
    cubeMesh.castShadow = true;   
    scene.add(cubeMesh)

    //球体
    const sphereGeometry = new THREE.SphereGeometry(15, 15, 15);
    const sphereMaterial = new THREE.MeshPhongMaterial({color: 0xffff00});
    const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphereMesh.position.set(20, 20, 0);
    sphereMesh.castShadow = true;   
    scene.add(sphereMesh);

    //相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
    camera.position.set(0, 100, 170);
    //渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio); //设置设备像素比
    renderer.setSize(window.innerWidth, window.innerHeight);     
    renderer.shadowMap.enabled = true; //如果设置开启，允许在场景中使用阴影贴图。默认是 false。
    document.body.appendChild(renderer.domElement);
    const control = new OrbitControls(camera, renderer.domElement);

    //循环回调
    animate();
    function animate() {
		 //立方体自转
		 cubeMesh.rotation.x += 0.01; 
		 renderer.render(scene, camera);	
		 requestAnimationFrame(animate);		
    }
 
    var sizes = {};
    window.addEventListener("resize", () => {
        sizes.height = window.innerHeight;
        sizes.width = window.innerWidth;
        camera.aspect = sizes.width / sizes.height;
        camera.updateProjectionMatrix();
        renderer.setSize(sizes.width, sizes.height);
        renderer.setPixelRatio(window.devicePixelRatio);
    });
</script>
</body>
</html>

效果

在HBuilder使用“运行->运行到浏览器->Chrome"即可看到效果

three.js学习 开始尝试使用_threejs_04