参考资料是 《three.js开发指南》这本书第一章的示例和讲解。
本示例浏览地址:https://ithanmang.gitee.io/threejs/home/201806/20180623/02-add-animation.html
由下图可以看到,场景中只有一个平面和一个立方体。
下面是参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渲染并展示三维对象</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="../libs/jquery-1.9.1.min.js"></script>
<script src="../libs/build/three.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<script>
$(function () {
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
// 创建渲染器
var webGLRenderer = new THREE.WebGLRenderer();
// 配置相机
camera.position.set(200, 150, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0)