我正在尝试将 3d 模型查看器嵌套在具有文本等其他信息的响应式布局中。我正在使用 window.innerWidth 和 window.innerHeight 但后来我切换到 .clientWidth 和 .clientHeight 因此渲染器大小将由 css 控制但它不会渲染。
我正在使用这个网站寻求帮助 https://greggman.com/downloads/examples/three-by-css/three-by-css.html
<!DOCTYPE html>
<html>
<head>
<title>threejs - basic</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
canvas{
display: inline-block;
background: red;
width: 40%;
height: 40%;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<canvas>
<p>hi</p>
</canvas>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
<script >
var renderer,
scene,
camera,
myCanvas = document.getElementById('myCanvas');
//Renderer
renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true});
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, window.clientHeight);
//Camera
camera = new THREE.PerspectiveCamera(50, canvas.clientWidth / window.clientHeight, .01, 3000);
//Scene
scene = new THREE.Scene();
//Lights
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var light2= new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);
var geometry = new THREE.BoxGeometry(100,100);
//Geometry Material
var material = new THREE.MeshLambertMaterial({color:0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -1000;
scene.add(mesh);
//RenderLoop
render();
var delta = 0;
function render(){
//RotateMeshes
mesh.rotation.x += .0001
mesh.rotation.y += .001
mesh.rotation.z += .001
//ActiveVertices
delta += 0.1;
geometry.vertices[0].x = -25 + Math.sin(delta) * 50;
geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
</script>
</body>
</html>最佳答案
我看到两个问题:
请不要对多个元素使用相同的 id 如果您想创建具有相同渲染的多个 Canvas ，您可以使用一个类并使用循环来触发函数来渲染每个 Canvas 。
clientWith用于通过getElementById或其他函数选择的节点映射html 节点，但窗口对象没有此方法，如果您的引用是您可以使用 innerWidth 和 innerHeight 的窗口对象，在这种情况下，我看到您的 Canvas 大小是视口(viewport)的40%那么您可以使用window.innerHeight * 0.40.
希望对你有帮助
<!DOCTYPE html>
<html>
<head>
<title>threejs - basic</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
canvas{
display: inline-block;
background: red;
width: 40%;
height: 40%;
}
</style>
</head>
<body>
<canvas id="myCanvas">
<p>hi</p>
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
<script >
var myCanvas = document.getElementById('myCanvas');
//Renderer
var renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true});
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth * 0.40, window.innerHeight * 0.40);
//Camera
var camera = new THREE.PerspectiveCamera(50, ( window.innerWidth * 0.40) / ( window.innerHeight * 0.40 ), .01, 3000);
//Scene
var scene = new THREE.Scene();
//Lights
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var light2= new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);
var geometry = new THREE.BoxGeometry(100,100);
//Geometry Material
var material = new THREE.MeshLambertMaterial({color:0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -1000;
scene.add(mesh);
//RenderLoop
render();
var delta = 0;
function render(){
//RotateMeshes
mesh.rotation.x += .0001
mesh.rotation.y += .001
mesh.rotation.z += .001
//ActiveVertices
delta += 0.1;
geometry.vertices[0].x = -25 + Math.sin(delta) * 50;
geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
</script>
</body>
</html>关于javascript - 在 Canvas 或 div 中嵌套 Three.JS 渲染器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52086786/