第一步是 THREE.js:尝试将搅拌机模型添加到场景中的问题
Posted
技术标签:
【中文标题】第一步是 THREE.js:尝试将搅拌机模型添加到场景中的问题【英文标题】:First step's with THREE.js : issues trying to add a blender model to scene 【发布时间】:2012-07-18 12:40:48 【问题描述】:我正在使用 THREE.js 迈出第一步。
现在我只是尝试修改此处找到的示例文件:http://aerotwist.com/tutorials/getting-started-with-three-js/
该文件创建三个场景,添加一个球体和一个点光源。
我的问题是: 我没有找到如何用我使用 blender 2.63 创建并使用 blender 2.63 导出器导出的模型替换球体。
我猜我的语法有些错误。
下面是我的代码。谁能告诉我要改变什么才能让我的搅拌机模型在舞台上展示?
谢谢。
<head>
<meta charset="utf-8" />
<title>Sample Three.js</title>
<link rel="stylesheet" href="js/Styles.css" />
</head>
<body>
<div id="container">
</div>
</body>
<script src="js/Stats.js"></script>
<script src="js/Three.js"></script>
<script>
var WIDTH = 700,
HEIGHT = 600;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var container = window.document.getElementById('container');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
container.appendChild(renderer.domElement);
var sphereMaterial = new THREE.MeshLambertMaterial(
color: 0xCC0000
);
//var radius = 50, segments = 16, rings = 16;
var loader = new THREE.JSONLoader();
loader.load( 'js/ModelTest.js', function ( geometry )
mesh = new THREE.Mesh( geometry, sphereMaterial );
scene.add( mesh );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
alert(mesh.geometry.vertices.length)
);
//var sphere = new THREE.Mesh(
//new THREE.SphereGeometry(radius, segments, rings),sphereMaterial);
//scene.add(sphere);
scene.add(camera);
var pointLight = new THREE.PointLight( 0xFFFFFF );
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
renderer.render(scene, camera);
</script>
【问题讨论】:
【参考方案1】:也许是一个愚蠢的答案,但我遇到了同样的问题并解决了它缩放对象。 尝试在 mesh.position.z=0 之后添加回调函数:
mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;
对我来说它有效。
希望有用。 彼得罗
【讨论】:
【参考方案2】:没有活生生的例子,很难知道...
加载是异步进行的。将 render() 调用移动到加载器回调函数的最后一行。 (替换您的警报呼叫)。
确保相机离模型足够近,可以看到它。
camera.lookAt( scene.position )
将确保相机在您移动后对准原点。
【讨论】:
以上是关于第一步是 THREE.js:尝试将搅拌机模型添加到场景中的问题的主要内容,如果未能解决你的问题,请参考以下文章
THREE.JS GLTFLoader,使用工作灯加载搅拌机场景
THREE.JS 从搅拌机中导出 JSON 模型(包括纹理)