html Three.js playgroundhttps://bl.ocks.org/reynish/bb06fb67c247b0a32d67769c0c295d75

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Three.js playgroundhttps://bl.ocks.org/reynish/bb06fb67c247b0a32d67769c0c295d75相关的知识,希望对你有一定的参考价值。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial({
  color: 0xCC0000
});
var cube = new THREE.Mesh( geometry, material );
// create a point light
var pointLight = new THREE.PointLight(0xFFFFFF);

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

cube.rotation.x = 0.3;
cube.rotation.y = -0.3;
scene.add( cube );
camera.position.z = 5;

var render = function () {
  requestAnimationFrame( render );
  renderer.render(scene, camera);
};

render();
<html>
  <head></head>
  <body>
    <script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
    <script src="script.js"></script>
  </body>
</html>

以上是关于html Three.js playgroundhttps://bl.ocks.org/reynish/bb06fb67c247b0a32d67769c0c295d75的主要内容,如果未能解决你的问题,请参考以下文章

three.js笔记

Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js)

Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js)

Three.js活地图

浅谈图形学WebGL 以及 Three.js

three.js入门第一个案例