利用three.js画一个3D立体的正方体示例代码(3)
最后，创建renderer对图像进行渲染
将canvas交给renderer，也就是一个渲染的容器
antialias: true 平滑，抗锯齿，输出的画面会进行优化，不会带毛边
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
// 设置renderer的样式
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
经过以上步骤，我们的的正方体就成功创建好了。
以下是本例完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Camera 相机</title>
<style>
#canvas {
width: 400px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./libs/three.min.js"></script>
<script>
var camera, scene, renderer, canvas;
init();
function init () {
canvas = document.getElementById('canvas');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
camera.position.set(1, 1, 5);
scene.add(camera);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
// cube 是一个可以填充的形状
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer = new THREE.WebGLRenderer({
// 将canvas交给renderer 一个渲染的容器
canvas: canvas,
// 平滑， 抗锯齿 输出的画面会进行优化，不会带毛边
antialias: true
});
// 设置renderer的样子
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);
}
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对黑区网络的支持。