如何从Blender在浏览器上的三个js中显示对象?

时间:2018-11-07 16:19:47

标签: three.js 3d blender

我在搅拌器中有这个对象enter image description here,我想在三个js上显示它,但是结果enter image description here如此不同,无法更改视图,我该如何更改视图用鼠标?

这是我的完整代码,我是新手,这是我第一次使用Three.js和Blender:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - loaders - ColladaLoader2</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body{
				margin: 0;
				overflow: hidden;
				}
		</style>
	</head>

	<body>
		<div id="WebGL-output">
		</div>

		<script src="https://threejs.org/build/three.min.js"></script>
		<script src="colladaloader.js"></script>

		<script>

		function init() {
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			var axes = new THREE.AxisHelper(20);
			scene.add(axes);

			var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
			var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
			var plane = new THREE.Mesh(planeGeometry, planeMaterial);
			plane.rotation.x = -0.5 * Math.PI;
			plane.position.x = 15
			plane.position.y = 0
			plane.position.z = 0
			scene.add(plane);
			document.body.appendChild(renderer.domElement);
			camera.position.set(0, 0, 4);
			var loader = new THREE.ColladaLoader();
			loader.load("MAC12.dae", function (result) {
				scene.add(result.scene);
			});

			function render() {
				requestAnimationFrame(render);
				renderer.render(scene, camera);
			}
			render();
		};
		
		window.onload = init;
		</script>
	</body>
</html>

0 个答案:

没有答案