在 Three.js 中导入搅拌机 JSON
Importing blender JSON in Three.js
您好,我在 three.js 中从 blender 导入模型时遇到问题。
此时我使用的是three.js(R71)的最新版本。我在搅拌机中安装了 three.js 的导出器并且导出正常。
这是HTML的代码。
<body>
<font size="+6"><b>TFG</b></font><br>
<a href="../index.html">Volver a atrás</a>
<hr>
<div id='container'></div>
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/ColladaLoader.js"></script>
<script src="threejs/tfg2.js"></script>
<br>
</body>
下一个文件是我加载模型的 tfg2.js。
var width = window.innerWitdh,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D();
init();
function init()
{
scene =new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, width/height, 1000);
camera.position.set(0,1,5);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height);
renderer.setClearColor(new THREE.Color(0x0000AA));
document.getElementById('container').appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);
scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();
loader.load('blender/json/camara.json', function(geometry,materials)
{
modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(modelo);
});
}
当我尝试查看结果时,网页中没有显示任何内容,JavaScript 控制台也没有显示任何错误。如果我使用 collada 格式和我拥有的另一个 .js 导出模型,我可以看到模型,但我需要使用 JSON.
我做错了什么?编辑:
添加:modelo.position.set(0,0,0) 在回调中以确保模型是原始的。
既然没有错误你可以做什么:
从 blender 导出 object 时将 object 翻译成原点。转到原点>> select 原点到几何>> 将object 转换为x、y、z 到零。
现在你的相机分别看到@位置0,1,5 xyz
可能是你的 object 相机没看到的地方
或者将场景child翻译成原点
这可能会解决您的问题。正如我所见,日志中没有错误和警告。
您好,我在 three.js 中从 blender 导入模型时遇到问题。
此时我使用的是three.js(R71)的最新版本。我在搅拌机中安装了 three.js 的导出器并且导出正常。
这是HTML的代码。
<body>
<font size="+6"><b>TFG</b></font><br>
<a href="../index.html">Volver a atrás</a>
<hr>
<div id='container'></div>
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/ColladaLoader.js"></script>
<script src="threejs/tfg2.js"></script>
<br>
</body>
下一个文件是我加载模型的 tfg2.js。
var width = window.innerWitdh,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D();
init();
function init()
{
scene =new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, width/height, 1000);
camera.position.set(0,1,5);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height);
renderer.setClearColor(new THREE.Color(0x0000AA));
document.getElementById('container').appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);
scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();
loader.load('blender/json/camara.json', function(geometry,materials)
{
modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(modelo);
});
}
当我尝试查看结果时,网页中没有显示任何内容,JavaScript 控制台也没有显示任何错误。如果我使用 collada 格式和我拥有的另一个 .js 导出模型,我可以看到模型,但我需要使用 JSON.
我做错了什么?编辑:
添加:modelo.position.set(0,0,0) 在回调中以确保模型是原始的。
既然没有错误你可以做什么:
从 blender 导出 object 时将 object 翻译成原点。转到原点>> select 原点到几何>> 将object 转换为x、y、z 到零。 现在你的相机分别看到@位置0,1,5 xyz 可能是你的 object 相机没看到的地方
或者将场景child翻译成原点
这可能会解决您的问题。正如我所见,日志中没有错误和警告。