html - 对threejs的工作方式感到困惑
问题描述
我在这个 html/css 代码中使用了示例代码和一个旨在使用 three.js 创建一个 3D 立方体的脚本。
当我打开 HTML 文件时,我会在 chrome 中看到一个空白页面,其中只有“canvas { width: 100%; height: 100% }”
这是我的代码:
<html>
<head>
<title>My first Three.js app</title> <style>canvas { width: 100%;
height: 100% }</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new
THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,
window.innerHeight);document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
var material = new THREE.MeshBasicMaterial({color: 0xfffff,
wireframe: true});
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
解决方案
您的相机可能是从立方体内部开始的。
尝试添加:
camera.position.set (0,0,1000)
有可能:
camera.lookAt (new THREE.Vector3 (0,0,0))
创建相机后。
另一种选择是只运行以下代码段,然后检查它以寻找线索:
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w/h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x808080 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x00FFFF );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0xFF00FF );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var sphereGeom = new THREE.SphereGeometry(5,16,16);
for(var i=0;i<sphereGeom.vertices.length;i++){
var v = sphereGeom.vertices[i];
if(v.y<0) v.y=0;
}
sphereGeom.verticesNeedUpdate = true;
sphereGeom.computeFaceNormals();
sphereGeom.computeVertexNormals();
var material = new THREE.MeshLambertMaterial( { color: 0x808080 } );
var mesh = new THREE.Mesh( sphereGeom, material );
scene.add( mesh );
renderer.setClearColor( 0xdddddd, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
推荐阅读
- c# - Unity 使用 IENumerator 设置另一个对象将使用的类
- signed - 为什么 unsigned int 的可接受范围是 -128 到 127?为什么没有从 -127 到 128 的范围?
- ms-access - 使用 switch 和内部连接进行更新
- c++ - 为什么这个混合继承程序会给出错误的输出?
- java - 更改 Fragment 的背景图片
- java - 尽管包含必要的语法,但无法在 Android 应用中查看导航栏
- bash - 如何将目录名称和日期附加为备份文件后缀?
- opencv3.0 - python cv2特征匹配给出不同的结果
- c# - 如何使控件的大小与屏幕分辨率相对应?
- machine-learning - 为什么最大池化层在解决回归问题时不会破坏 CNN 的性能?