第一个 Three.js案例

小吴吴吴呀

已于 2022-09-28 08:37:17 修改

阅读量612

点赞数 1

文章标签： servlet java html

于 2022-09-27 20:35:36 首次发布

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/127077453

版权

Three.js案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>第一个Threejs案例</title>
        <script src="./js/three.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            #webgl {
                width: 100%;
                height: 100vh;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <div id="webgl"></div>

        <script>
            
            // 获取渲染容器
            let webgl = document.getElementById("webgl");
            
            // 获取渲染容器的宽高
            let webglWidth = webgl.offsetWidth;
            let webglHeight = webgl.offsetHeight;
            
            // 创建场景
            let scene = new THREE.Scene();
            
            // 创建三维坐标（轴线长度）
            // 用于调试：红色：x轴、绿色：y轴、蓝色：z轴
            let axes = new THREE.AxesHelper(60);
            
            // 添加三维坐标到场景中
            scene.add(axes);
            
            // 设置环境光（十六进制颜色）
            let ambient = new THREE.AmbientLight(0x444444);
            
            // 将环境光添加到场景中
            scene.add(ambient);
            
            // 设置点光源（十六进制颜色）
            let point = new THREE.PointLight(0xffffff);
            
            // 设置点光源的位置（x轴, y轴, z轴）
            point.position.set(400, 200, 300); 
            
            // 将点光源添加到场景中
            scene.add(point); 
            
            // 创建立方几何体（x轴, y轴, z轴）
            let cubeGeometry = new THREE.BoxGeometry(20,20,20);
            
            // 创建网格基础材质
            let cubeMaterial = new THREE.MeshLambertMaterial({color:0x00FFFF});
            
            // 创建立方体（几何体, 材质）
            let cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            
            // 调整立方体位置（x轴, y轴, z轴）
            cube.position.set(0, 0, 0); 
            
            // 将立方体添加到场景中
            scene.add(cube);
            
            // 创建透视相机（角度, 宽高比, 最近距离, 最远距离）
            let camera = new THREE.PerspectiveCamera(60,webglWidth/webglHeight,0.1,2000);
            
            // 设置相机的位置（x轴, y轴, z轴）
            camera.position.set(100, 100, 100); 
            
            // 将相机指向场景中心
            camera.lookAt(scene.position);
            
            // 创建渲染器
            let renderer = new THREE.WebGLRenderer();
            
            // 设置渲染器的初始颜色（十六进制颜色, 透明度）
            renderer.setClearColor(0xEEEEEE,1);
            
            // 设置渲染器大小（标签宽度, 标签高度）
            renderer.setSize(webglWidth,webglHeight);
            
            // 将渲染器添加到渲染容器中（渲染器元素）
            webgl.appendChild(renderer.domElement);
            
            // 创建渲染函数
            function render(){
                // 渲染场景和相机（场景, 相机）
                renderer.render(scene,camera);
            }
            
            // 调用渲染函数
            render();
            
            // 设置窗口变化自适应调整事件
            window.onresize = function(){
                
                // 重新获取渲染容器的宽高
                webglWidth = webgl.offsetWidth;
                webglHeight = webgl.offsetHeight;
                
                // 重置渲染器canvas画布大小
                renderer.setSize(webglWidth,webglHeight);
                
                // 重置相机显示范围的宽高比
                camera.aspect = webglWidth/webglHeight;
              
                // 更新相机的投影矩阵
                camera.updateProjectionMatrix();
                
                // 重新调用渲染函数
                render();
            };
            
        </script>

    </body>
</html>