three.js 打包为一个组-几个单独的模型
2023-09-11 14:22:27 时间
代码:
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - 3DS loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="/three.js/main.css"> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader </div> <script type="module"> //注意: //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径 import * as THREE from '/three.js/build/three.module.js'; import { TrackballControls } from '/three.js/jsm/controls/TrackballControls.js'; var container, controls; var camera, scene, renderer; init(); animate(); function resize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { controls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// camera.position.z = 20; camera.position.x = 20; scene = new THREE.Scene(); var axis = new THREE.AxisHelper(3);//显示三维坐标系 scene.add(axis); var ambient = new THREE.AmbientLight(0xffffff);//环境光 scene.add(ambient); //创建一个组 这个组包含了两个模型 var geometry = new THREE.BoxBufferGeometry(1, 1, 1);//形状 var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//材质 //创建网格:网格 = 形状 + 材质 var cubeA = new THREE.Mesh(geometry, material);//网格1 cubeA.position.set(0, 1, 0); var cubeB = new THREE.Mesh(geometry, material);//网格2 cubeB.position.set(0, -1, 0); var group = new THREE.Group(); group.add(cubeA); group.add(cubeB); scene.add(group); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); controls = new TrackballControls(camera, renderer.domElement); window.addEventListener('resize', resize, false); } </script> </body> </html>
效果:
相关文章
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(Popup.js)3D对话框窗口插件
- Js基础知识3-字符串、正则表达式全解
- A2D JS框架 - AOP封装
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
- 在Windows平台上安装Node.js及NPM模块管理
- 重写js文件
- vue.js - 解决vue-cli打包后自动压缩代码
- [Node.js] Migration with Umzug
- [Node.js]28. Level 5: Express Server
- 吗咿呀嘿-用js来搞个简单的人脸识别
- 华为OD机试 - 异常的打卡记录(Java & JS & Python)
- Stimulsoft Dashboards.JS 2022.2.3 Crack
- vue-ant design示例大全——icon与分隔符本地css/js资源
- js 滚轮控制图片缩放大小和拖动
- node.js JS对象和JSON字符串之间的转换
- Vue2.js迁移到Vue3.js的API变化