three.js正交相机代码示例

Three.js Orthographic Camera example

three, camera

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1339
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var clock = new THREE.Clock();

var camera, scene, renderer,
  particle1, particle2,
  light, spotlight, object, lightHelper, loader;

init();
animate();

function init() {
  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / -50, - 500, 1000); 
  
  renderer = new THREE.WebGLRenderer();
  //renderer.setClearColor(0xEEEEEE, 1);
  renderer.shadowMap.enabled = true;
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

planeMaterial = new THREE.MeshPhongMaterial({
    color: 0xCCCCCC
  });
  planeGeometry = new THREE.PlaneGeometry(300, 300);
  floor = new THREE.Mesh(planeGeometry, planeMaterial);
  floor.rotation.x = -0.5 * Math.PI;
  floor.position.z = 0;
  floor.position.y = 0;
  floor.position.x = 15;
  floor.receiveShadow = true;
  scene.add(floor);

boxGeometry = new THREE.IcosahedronGeometry(4, 1);
  boxMaterial = new THREE.MeshPhongMaterial({
    color: 0x99FFFF,
    shading: THREE.FlatShading
  });
  cube = new THREE.Mesh(boxGeometry, boxMaterial);
  cube.castShadow = true;
  cube.position.x = -4;
  cube.position.y = 5;
  cube.position.z = 0;
  scene.add(cube);

var ambiColor = "#1c1c1c";
  ambientLight = new THREE.AmbientLight(ambiColor);
  scene.add(ambientLight);

sphere = new THREE.SphereGeometry(0.5, 16, 8);

light = new THREE.PointLight(0xFFFFFF, 1, 100);
  light.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
    color: 0xffffff
  })));
  light.position.set(-10, 10, 0);
  light.castShadow = true;
  scene.add(light);

directionalLight = new THREE.DirectionalLight(0xFFFFFF);
  directionalLight.position.set(-40, 150, -10);
  directionalLight.castShadow = true;
  directionalLight.shadowCameraNear = 2;
  directionalLight.shadowCameraFar = 200;
  directionalLight.shadowCameraLeft = -50;
  directionalLight.shadowCameraRight = 50;
  directionalLight.shadowCameraTop = 50;
  directionalLight.shadowCameraBottom = -50;
  directionalLight.distance = 50;
  directionalLight.intensity = 0.052;
  directionalLight.shadowMapHeight = 2024;
  directionalLight.shadowMapWidth = 2024;

scene.add(directionalLight);

spotlight = new THREE.SpotLight(0xFFFFFF, 1, 1300);
  spotlight.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
    color: 0xffffff
  })));

spotlight.position.set(-30, 30, 0);
  spotlight.castShadow = true;
  spotlight.angle = Math.PI / 3;
  spotlight.penumbra = 0.55;
  spotlight.decay = 2;
  spotlight.distance = 50;
  spotlight.shadow.mapSize.width = 2024;
  spotlight.shadow.mapSize.height = 2024;
  spotlight.shadow.camera.near = 1;
  spotlight.shadow.camera.far = 200;
  scene.add(spotlight);

lightHelper = new THREE.SpotLightHelper(spotlight);
  //scene.add(lightHelper);

camera.position.z = 50;
  camera.position.y = 40;
  camera.position.x = 130;
  let vector = {
    x : 20,
    y : 25,
    z : 32
  };
  console.log(cube.position);
  camera.lookAt(cube.position);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var time = Date.now() * 0.0005;
  var delta = clock.getDelta();
  //if (object) object.rotation.y -= 0.5 * delta;
  light.position.x = Math.sin(time * 0.5) * 10;
  light.position.y = Math.cos(time * 0) * 10;
  light.position.z = Math.cos(time * 0.5) * 10;
  cube.rotation.x += 0.02;
  cube.rotation.y += 0.02;
  lightHelper.update(); // required
  renderer.render(scene, camera);

}

编译

CSS

HTML

Three.js Orthographic Camera example

three, camera

编辑器支持Emmet

快捷键

Three.js Orthographic Camera example

three, camera

three.js octree 光线投射（raycasting）实现选择交互的代码示例

three.js使用随机噪音实现顶点置换着色器代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：