第一个three.js程序

最新推荐文章于 2023-08-07 18:53:06 发布

盛桃云

最新推荐文章于 2023-08-07 18:53:06 发布

阅读量375

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/bowei026/article/details/51306621

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

three.js第一个例子：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="mycanvas" width="400px" height="300px"></canvas>

<script type="text/javascript" src="lib/three.min.js"></script>
<script type="text/javascript">
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mycanvas')
});
renderer.setClearColor(0x000000); // black

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff // white
});

// plane
var planeGeo = new THREE.PlaneGeometry(1.5, 1.5);
var plane = new THREE.Mesh(planeGeo, material);
plane.position.x = 1;
scene.add(plane);

// triangle
var triGeo = new THREE.Geometry();
triGeo.vertices = [new THREE.Vector3(0, -0.8, 0), new THREE.Vector3(-2, -0.8, 0), new THREE.Vector3(-1, 0.8, 0)];
triGeo.faces.push(new THREE.Face3(0, 2, 1));
var triangle = new THREE.Mesh(triGeo, material);
scene.add(triangle);

renderer.render(scene, camera);
</script>
</body>

</html>

一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体，物体由几何体和材质构成。

也可以通过api控制canvas的大小：renderer.setSize(400, 300);

场景（Scene）：var scene = new THREE.Scene();

照相机（Camera）：

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

长方体：

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3)
, new THREE.MeshBasicMaterial({color: 0xff0000 })
);
scene.add(cube);

渲染：renderer.render(scene, camera);

第二个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="mycanvas"></canvas>

<script type="text/javascript" src="lib/three.min.js"></script>
<script type="text/javascript">
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mycanvas')
});
renderer.setSize(400, 300);
renderer.setClearColor(0x000000); // black

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 4/3, 1, 1000);
camera.position.set(1, 2, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff // white
});

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3)
, new THREE.MeshBasicMaterial({color: 0xff0000 }) );
scene.add(cube);

renderer.render(scene, camera);
</script>
</body>
</html>

three.js的重要对象请访问http://threejs.org/docs/，界面左侧即是three.js的重要对象。

本文内容到此结束，更多内容可关注公众号

盛桃云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一个three.js程序

three.js第一个例子：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><canvas id="mycanvas" width="40...
复制链接

扫一扫

专栏目录