Three.js 三维空间穿越之门

所有通过穿越之门的圆球都被吸收消隐。

three, portal

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 200;
// camera.lookAt(scene.position);

let renderer = new THREE.WebGLRenderer({
  alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls( camera, renderer.domRenderer);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;

const t = 200;
let particleSystem = [];

/* build the scene */
function createFigures() {
  for(let i = 0; i < t; i++) {
    var geometry = new THREE.SphereGeometry(randomInt(10, 15), 20, 20);
    var material = new THREE.MeshPhongMaterial( {color: Math.random() * 0xffffff } );
    var sphere = new THREE.Mesh( geometry, material );
    
    sphere.position.z = randomInt(0, 200);
    
    sphere.position.x = randomInt(-500, 500);
    sphere.position.y = randomInt(-500, 500);
    scene.add(sphere);
    particleSystem.push(sphere)
  }
}

function addLights() {
  let ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
  let spotLight = new THREE.SpotLight( 0xdfdfdf, 1 );
  spotLight.position.z = 200;
  scene.add(ambient);
  scene.add(spotLight);
}

function init() {
  createFigures();
  addLights();
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  // controls.update();
  render();
}

function stamp(pos, color) {
  var segmentCount = 32,
    radius = 5,
    geometry = new THREE.Geometry(),
    material = new THREE.LineBasicMaterial({ color });

for (var i = 0; i <= segmentCount; i++) {
    var theta = (i / segmentCount) * Math.PI * 2;
    geometry.vertices.push(
        new THREE.Vector3(
            Math.cos(theta) * radius,
            Math.sin(theta) * radius,
            0));            
}

let m = new THREE.Line(geometry, material);
  m.position.z = pos.z;
  m.position.x = pos.x;
  m.position.y = pos.y;
  scene.add(m);
}

init();
animate();
  
function randomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

编译

CSS

HTML

所有通过穿越之门的圆球都被吸收消隐。

three, portal

编辑器支持Emmet

快捷键

所有通过穿越之门的圆球都被吸收消隐。

three, portal

WebGL Three.js 三维网格空间

WebGL Three.js三维宇宙空间旋转背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：