《Three.js开发指南》第一章学习随着Web技术的不断发展，网页上显示更丰富的内容已经成为必需。其中3D网页技术也受

第一章学习要点

使用Three.js渲染场景时，首先需要做的就是创建THREE.Scene对象，添加摄像机、光源和需要渲染的物体；
摄像机决定哪些东西会被渲染到场景中在Threejs中，通过创建材质对象来设置外观；
现代浏览器通过requestAnimationFrame函数结合渲染器渲染方法提供良好的动画解决方案。你只需要创建负责绘制场景的回调函数

ThreeJs 开发套路

创建场景
创建相机
创建几何体
将几何体添加到场景中
初始化渲染器
使用渲染器，通过相机将场景渲染进来

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document22</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <div id="webgl-output"></div>
    <script src="./main/main01-2.js" type="module"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

import * as THREE from "three";

function init(){
    // 创建场景
    var scene = new THREE.Scene();
    // 创建摄像机
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    // 设置场景的背景颜色和大小
    renderer.setClearColor(0x000000);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    
    // 添加轴和平面
    // 轴
    var axes = new THREE.AxesHelper(20)
    scene.add(axes);

    // 平面
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({
        color: 0xAAAAAA
    });
    // 将大小和外观组合进Mesh对象并赋值给平面变量
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(15, 0, 0);
    scene.add(plane);

    // 添加正方体
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xFF0000,
       // wireframe: true
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.set(-4, 3, 0);
    cube.castShadow = true;
    scene.add(cube);

    // 添加球体
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777ff
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(20, 4, 2);
    sphere.castShadow = true;
    scene.add(sphere);

    // 添加光源
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 40, -15);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;
    scene.add(spotLight);

    camera.position.set(-30, 40, 30);
    camera.lookAt(scene.position);

    document.getElementById("webgl-output").appendChild(renderer.domElement);
    //renderer.render(scene, camera);

    renderScene()
    var step = 0;
    function renderScene(){
        // 添加动画
        // 正方体添加围绕轴旋转动画
        cube.rotation.x += 0.02;
        cube.rotation.y += 0.02;
        cube.rotation.z += 0.02;


        // 球体添加弹跳动画
        step += 0.04;
        sphere.position.x = 20 + 10*Math.cos(step);
        sphere.position.y = 2 + 10*Math.abs(Math.sin(step))

        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
    }
}



init();