美文网首页
threeJs基础(1)

threeJs基础(1)

作者: 尘世中迷途小羔羊 | 来源:发表于2018-05-24 18:00 被阅读0次

三大组件

1.场景

var scene = new THREE.Scence();

承载所绘对象的容器,如要显示个苹果,需将苹果加入场景中。

eg: 

var geometry = new THREE.CubeGeometry(1,1,1);   规定一个几何体;

var material = new THREE.MeshBasicMaterial({color:0x00ff00}); 规定一个样式

var cube = new THREE.Mesh(geometry, material);  生成3d模型对象

scene.add(cube); 将对象添加到场景。

2.相机

var camera = new THREE.PerspectiveCamera(); 

使用透视相机,其中参数很多,按下不表。

3.渲染器

var renderer = new THREE.WebGLRenderer();

renderer.render(scene,camera);

渲染器决定渲染结果应画在页面的什么元素上面,还有以怎么样的方式来绘制。

实时渲染:不停地对画面进行渲染,即使画面没有改变;使用requestAnimationFrame()函数。

相关文章

  • threeJs基础(1)

    三大组件 1.场景 var scene = new THREE.Scence(); 承载所绘对象的容器,如要显示个...

  • threeJs基础(2)

    基础元素 1.点 var point1 = new THREE.Vector3(x,y,z); 2.线 var g...

  • threeJs基础文档

    three.js基础结构 目录 一个three.js项目至少需要的东西有—— [ ] scene:场景 [ ] c...

  • ThreeJs 基础入门

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它在 web 中创建各种三维场景,包括了摄影机、光影...

  • THREE.js<物体的选中和文字提示>

    效果图: 对threejs的一些基础知识还不了解的,可以参考 ,去学习相关知识。 当然,在threejs中给物体添...

  • threejs绘制中文方案

    1. 使用threejs创建文字几何体 使用threejs自带的helvetiker_bold.typeface字...

  • three.js 笔记四 shape

    一、基本流程 参考ThreeJs 图形绘制基础[https://www.jianshu.com/p/a8ec586...

  • ThreeJs 图形绘制基础

    一、前言 和其他 GUI 系统一样,web 也提供了一个使用 canvas 来绘制图形的基础环境。利用 canva...

  • threejs 详解(一)

    1. 开始 1.1 开使用threejs写一个最简洁的demo 1.2 threejs常用对象或对象属性 1.2...

  • THREEJS 笔记1 最基本的项目

    一个threeJS基础项目里面有的东西上文已经介绍:https://www.zybuluo.com/mdedito...

网友评论

      本文标题:threeJs基础(1)

      本文链接:https://www.haomeiwen.com/subject/fibfdftx.html