基于Three.js实现3D汽车模型
生活随笔
收集整理的這篇文章主要介紹了
基于Three.js实现3D汽车模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
tips: 運行前請準備好對應的3D模型及Three.js三方庫依賴
<!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>Document</title></head><body><div id="box"></div><script type="module">// 注意依賴引入路徑，根據自己目錄調整import THREE from "THREE/build/three.min.js";import { GLTFLoader } from "THREE/examples/jsm/loaders/GLTFLoader.js";import { OrbitControls } from "THREE/examples/jsm/controls/OrbitControls.js";class Car {scene;renderer;innerwidth = innerWidth;innerHeight = innerHeight;constructor() {this.init();}async init() {// 加載gltf3D汽車模型配置文件， 3D模型文件可以在https://sketchfab.com/search?q=model+3&sort_by=-relevance&type=models上下載const gltf = await this.load3DModel("./models/bentley/scene.gltf");// 創建3D試圖場景this.createScene();// 設置場景環境光this.setSceneEnvironment();// 創建3D虛擬攝像機this.createCamera();// 將gltf文件的配置添加至主場景中this.scene.add(gltf.scene);// 渲染試圖this.loop();}createScene() {this.box = document.getElementById("box");this.scene = new THREE.Scene();this.renderer = new THREE.WebGLRenderer();// 設置渲染邊界this.renderer.setSize(this.innerwidth, this.innerHeight);// 設置場景背景色this.scene.background = new THREE.Color(0xeeeeee);// 插入dom節點this.box.appendChild(this.renderer.domElement);}setSceneEnvironment(){// 創建一個新的scence對象，用于設置主場景的environmentconst scene = new THREE.Scene();// 設置從某個點想四周發射的光源，用于照亮模型scene.add(new THREE.PointLight());// 創建網格層，指定初始照亮的物體面const mesh = new THREE.Mesh(new THREE.BoxGeometry(),new THREE.MeshStandardMaterial({ side: THREE.BackSide }));scene.add(mesh);const pmremGenerator = new THREE.PMREMGenerator(this.renderer);this.scene.environment = pmremGenerator.fromScene(scene).texture;}createCamera() {this.camera = new THREE.PerspectiveCamera(80,window.innerWidth / window.innerHeight,1,10000);this.camera.position.set(400, 200, 100);this.controls = new OrbitControls(this.camera, this.box);}load3DModel(url) {const loader = new GLTFLoader();return new Promise((resolve, reject) => {loader.load(url, (gltf) => {resolve(gltf);});});}loop() {requestAnimationFrame(() => this.loop());this.renderer.render(this.scene, this.camera);}}new Car();</script></body> </html>總結
以上是生活随笔為你收集整理的基于Three.js实现3D汽车模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： leaflet动态绘制圆、多边形
- 下一篇： 前端从服务器获取时间进行倒计时