加载了一个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>