学习threeJS(一)--第一个threeJs

最新推荐文章于 2024-07-08 09:56:34 发布

weixin_34258078

最新推荐文章于 2024-07-08 09:56:34 发布

阅读量730

点赞数

文章标签： c/c++ javascript python ViewUI

原文链接：https://my.oschina.net/u/3589012/blog/3050284

版权

2019独角兽企业重金招聘Python工程师标准>>>

参考：threeJS开发指南

threeJs三个基本要素

1、scene：一个容器，保存并跟踪我们想渲染的物体

2、camera：定义在scene里能看到什么

3、rederer：计算指定camera角度下scene的样子--使用什么方式渲染（常见利用显卡渲染）

html：引入jQuery-1.9.0、threeJS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加光源</title>
  <style>
      body {
          margin: 0;
          overflow: hidden;
      }
  <style/>
</head>
<body>
<div id="WebGl-output"></div>
<script type="text/javascript" src="../../build/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

js:

1、要初始化三要素scene、camera、rederer

// 定义scene,camera,renderer
// scene是一个容器，保存并跟踪我们想渲染的物体
var scene = new THREE.Scene();
// 定义在scene里能看到什么
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000);
// 计算指定camera角度下scene的样子--使用显卡渲染
var renderer = new THREE.WebGLRenderer();
// 背景颜色
renderer.setClearColorHex(0xEEEEEE);
// 背景大小
renderer.setSize(window.innerWidth, window.innerHeight);

2、添加坐标轴

// 创建坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);

3、添加一个灰色的平面

// 创建平面
// 定义平面尺寸 -- 宽60，高20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 颜色
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
// 合并尺寸和颜色
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 定义位置
// 绕着x轴旋转90度
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

4、添加一个正方体

  // 创建方块
  var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
  var cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = -4;
  cube.position.y = 3;
  cube.position.z = 0;
  scene.add(cube);

5、添加一个球体

  // 创建球体
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x7777ff,
    wireframe: true
  });
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 20;
  sphere.position.y = 4;
  sphere.position.z = 2;
  scene.add(sphere);

6、指定相机的位置和悬挂的角度

  // 指定相机的位置，将其悬挂在场景上方
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  // 指向场景中心
  camera.lookAt(scene.position);

7、讲scene和camera挂载到html

  // 挂载到html上
  $("#WebGl-output").append(renderer.domElement);
  renderer.render(scene, camera);

结果如图

转载于:https://my.oschina.net/u/3589012/blog/3050284

weixin_34258078

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习threeJS(一)--第一个threeJs

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫