标准three.js 基础代码模板

最新推荐文章于 2024-07-21 13:53:47 发布

three小白白

最新推荐文章于 2024-07-21 13:53:47 发布

阅读量396

点赞数

本文链接：https://blog.csdn.net/weixin_50207776/article/details/120022938

版权

代码开发基础模板（个人常用，分享！）

个人项目可以在此基础上直接编辑！！方便！

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>标准three.js基础代码模板</title>
    <style>
       body {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

    </style>
</head>

<body onload="init()">
    <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
    <!-- <script src="../js/OrbitControls.js"></script> -->
    <script>
        //声明一些全局变量
        var renderer, camera, scene, geometry, material, mesh, controls;

        //初始化渲染器
        function initRenderer() {
            renderer = new THREE.WebGLRenderer(); //实例化渲染器
            renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            document.body.appendChild(renderer.domElement); //添加到dom
        }

        //初始化场景
        function initScene() {
            scene = new THREE.Scene(); //实例化场景
        }

        //初始化相机和控制器
        function initCamera() {

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
            camera.position.set(0, 0, 10); //(无/上下视角/远近视角)
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            // controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
            // controls.target = new THREE.Vector3(0, 0, 0);
            //controls.maxPolarAngle = (Math.PI / 4) * 3
            //controls.minPolarAngle = Math.PI / 4
            //controls.rotateSpeed = 0.5;
            // controls.minDistance = 95;
            // controls.maxDistance = 130;
            // controls.enableDamping = true;
            // controls.dampingFactor = 0.6;
            // controls.autoRotate = true;

        }

        //创建模型
        function initMesh() {
            geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体
            material = new THREE.MeshNormalMaterial(); //创建材质
            mesh = new THREE.Mesh(geometry, material); //创建网格
            scene.add(mesh); //将网格添加到场景
        }

        //开起渲染器
        var clock = new THREE.Clock();
        function animate() {
            delta = clock.getDelta();
            // controls.update(delta);
            requestAnimationFrame(animate); //循环调用函数
            mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
            mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
            renderer.render(scene, camera); //渲染界面
        }

        //灯光
        function light() {
            var ambient = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambient);

            var point = new THREE.PointLight(0x0000ff,1);
            point.position.set(40, 20, 30); //点光源位置
            scene.add(point); //点光源添加到场景中

        }

        //屏幕自适
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        window.addEventListener('resize', onWindowResize);
        window.onresize = onWindowResize;

        //初始化函数，页面加载完成时调用
        function init() {
            initRenderer();
            initScene();
            initCamera();
            initMesh();
            light();
            animate();
        }
    </script>
</body>

</html>