Three.js 不显示搅拌机型号
Three.js doesn't display blender model
我导出了一个简单的搅拌机模型,这是我之前使用 three.js 提供的插件制作的,它创建了一个 .json 文件。然后我尝试将该文件导入我的项目,但完全没有成功。
我把它放在本地服务器上,因为不允许通过 file:// 进行文件传输,因此,我使用 HTTP。
问题是我看不到模型。我正在使用以下代码导入它:
var loader = new THREE.JSONLoader();
loader.load( 'model/mountain.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );
});
我已正确设置相机和场景,因为我可以创建和添加原生 three.js 形状,例如方框和平原,而且我 100% 确定文件位于正确的位置。
我在 reddit 上提问,/u/Egenimo 帮我解答了!
这是完整的代码,我认为它可能会对需要设置场景的人有所帮助。
var canvas = document.getElementById("bgcanvas"),
renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true }),
windowHeight = window.innerHeight,
windowWidth = window.innerWidth,
camera, scene, renderer, loader;
init();
function init() {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;
// scene
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load( 'cube.json', function ( geometry ) {
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({overdraw: true}));
scene.add( mesh );
});
console.log(scene.children.length);
render();
}
function render() {
requestAnimationFrame(function() {
render();
});
renderer.render(scene, camera);
}
然后我 运行 进入了一个更复杂的模型的问题,有几个对象,而 ThreeJS 只会导入一个,因此,在查找之后,我通过 [=11 找到了这个答案=].
希望对有需要的人有所帮助!
我导出了一个简单的搅拌机模型,这是我之前使用 three.js 提供的插件制作的,它创建了一个 .json 文件。然后我尝试将该文件导入我的项目,但完全没有成功。
我把它放在本地服务器上,因为不允许通过 file:// 进行文件传输,因此,我使用 HTTP。
问题是我看不到模型。我正在使用以下代码导入它:
var loader = new THREE.JSONLoader();
loader.load( 'model/mountain.json', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );
});
我已正确设置相机和场景,因为我可以创建和添加原生 three.js 形状,例如方框和平原,而且我 100% 确定文件位于正确的位置。
我在 reddit 上提问,/u/Egenimo 帮我解答了!
这是完整的代码,我认为它可能会对需要设置场景的人有所帮助。
var canvas = document.getElementById("bgcanvas"),
renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true }),
windowHeight = window.innerHeight,
windowWidth = window.innerWidth,
camera, scene, renderer, loader;
init();
function init() {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;
// scene
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load( 'cube.json', function ( geometry ) {
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({overdraw: true}));
scene.add( mesh );
});
console.log(scene.children.length);
render();
}
function render() {
requestAnimationFrame(function() {
render();
});
renderer.render(scene, camera);
}
然后我 运行 进入了一个更复杂的模型的问题,有几个对象,而 ThreeJS 只会导入一个,因此,在查找之后,我通过 [=11 找到了这个答案=].
希望对有需要的人有所帮助!