three.js加载模型
var width = document.getElementById("models-container").clientWidth;
var height = document.getElementById("models-container").clientHeight;
debugger
//初始化场景
scene = new THREE.Scene();
//初始化相机
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(0, 62, 0);
//初始化灯光
var directional = new THREE.DirectionalLight(0xffffff, 0.15); //AmbientLight,影响整个场景的光源
directional.position.set(0, 100, 50);
scene.add(directional)
//初始化渲染器
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: true,
});
renderer.setSize(width, height);
document.getElementById("models-container").appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
controls.enableDamping = true; //将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false
controls.dampingFactor = 0.5; //阻尼惯性有多大。 Default is 0.05。要使得这一值生效,你必须在你的动画循环里调用.update()。
controls.minDistance = 50; // 视角最小距离
controls.maxDistance = 200; // 视角最远距离
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
//labelRenderer.render(scene, camera);
//scene.traverse(function (obj) { });
}
function loadSceneModel() {
var fbxLoader = new THREE.FBXLoader();
fbxLoader.load('../Content/models/scene.fbx', (object) => {
// 设置模型比例
var scale = 0.3;
object.scale.set(scale, scale, scale);
object.rotateX(- (Math.PI / 5));
// 设置模型位置
object.position.set(0, -2, -3);
scene.add(object);
});
}
loadSceneModel();
camera.lookAt(scene.position);
animate();
分类:
three.js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2024-02-20 threejs 如何设置自己想要的初始角度和大小
2024-02-20 three.js 使用 html div 给 Three.js 场景添加背景图的方法实现
2024-02-20 blender资源