three.js加载模型

糖朝

于 2024-03-02 13:33:21 发布

阅读量353

点赞数 8

文章标签： three.js

本文链接：https://blog.csdn.net/huang4998802/article/details/136414277

版权

加载了一个3D模型

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js editor</title>
		<meta charset="utf-8">

	</head>
	<body>
		<script type="importmap">
			{
				"imports": {
					"three": "./build/three.module.js",
					"three/addons/": "./examples/jsm/",

					"three/examples/": "./editor/examples/",
					"three-gpu-pathtracer": "https://unpkg.com/three-gpu-pathtracer@0.0.17/build/index.module.js",
					"three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@0.7.0/build/index.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE  from 'three';

            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

            const scene = new THREE.Scene();

             //scene.background = new THREE.Color('transparent')

           

            const loader = new GLTFLoader();

            loader.load(
                '/assets/model/sushe.gltf',
                (gltf) => {
                    console.log(gltf.scene);
                    scene.add(gltf.scene);
                }
            )

            const width = innerWidth; //宽度

            const height = innerHeight; //高度

            const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

            camera.position.set(10, 10, 10); 

            //camera.lookAt(mesh.position);

            const spotLight = new THREE.SpotLight(0xffffff,1.0);

            spotLight.position.set(0,1,0);

            console.log(spotLight)

            scene.add(spotLight);//光源添加到场景中

            const axesHelper = new THREE.AxesHelper(10);

            scene.add(axesHelper);

            const renderer = new THREE.WebGLRenderer();

            renderer.setSize(width,height);

            renderer.render(scene,camera);

            renderer.setClearColor('green', 1); //设置背景颜色

             // 设置相机控件轨道控制器OrbitControls
            const controls = new OrbitControls(camera, renderer.domElement);
            // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
            controls.addEventListener('change', function () {
                renderer.render(scene, camera); //执行渲染操作
            });//监听鼠标、键盘事件



            // controls.addEventListener('change', render);//监听鼠标、键盘事件

            document.body.appendChild(renderer.domElement);

            
            function render(){
                renderer.render(scene,camera);

                //mesh.rotateY(0.01);

                requestAnimationFrame(render);

            }

            render();


		</script>

        <style>
            body{
                margin: 0;
                padding: 0;
            }
        </style>
	</body>
</html>