(集成P5.js和Three.js)---用P5.js库中的动画创建ThreeJS场景吗? [英] (Intergrate P5.js and Three.js) --- Create a ThreeJS scene with animations from P5.js library?
问题描述
在开始之前，您可能需要阅读我之前的文章，该文章导致了这个问题的产生:
Before we begin, you may want to read my previous post which lead to the creation of this question:
使用Epicycle和Fourier变换绘制/渲染3D对象[动画]
上下文:
使用P5.js库，并遵循The Coding Train的教程(Coding Challenge#130.1->#130.3)，我能够使用Epicycles和Fourier变换制作动画并重新创建任何参数化图形. (阅读上一篇文章，相信我，它将对您有帮助)
Using the P5.js library and following a tutorial from The Coding Train (Coding Challenge #130.1 --> #130.3) i was able to animate and recreate any parametric drawing using epicycles and fourier transforms. (Read the Previous Post, trust me, it will help)
我现在正在寻求将其扩展到三个维度！
I am now looking to expand this to three Dimensions!
一位乐于助人的社区成员建议将3D图纸分成两个平面.这样，我不必编写新代码，并且可以使用我现有的2D代码！太酷了！
A helpful community member suggested breaking the 3D drawing into two planes. This way, i dont have to write new code, and could use my preexisting 2D code! cool right!
另一个用户建议使用Three.JS库为此过程创建3D场景.
Another User suggested using the Three.JS library to create a 3D scene for this process.
到目前为止，我已经制造了3架飞机.我想本质上将这些飞机用作电视屏幕.然后可以在电视屏幕上显示用P5js编写的2D版本，并在3D空间中投影一个新点以生成/绘制新的3D图.
So Far i have created 3 planes. I would like to essentially use these planes as TV Screens. TV screens where i can then display my 2D version from written in P5js and project a new point in 3D space to generate/draw a new 3D drawing.
<html>
<head>
<title>Epicyclic Circles</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script>
// Set up the basic scene, camera, and lights.
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
scene.add(camera)
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
camera.position.z = 50;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Add the orbit controls to permit viewing the scene from different angles via the mouse.
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.minDistance = 0;
controls.maxDistance = 500;
// Create center and epicyclic circles, extruding them to give them some depth.
var plane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 );
var helper = new THREE.PlaneHelper( plane, 50, 0x696969 );
scene.add( helper );
var plane2 = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 );
var helper2 = new THREE.PlaneHelper( plane2, 50, 0xE06666 );
scene.add( helper2 );
var plane3 = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
var helper3 = new THREE.PlaneHelper( plane3, 50, 0xD85C6 );
scene.add( helper3 );
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
var animate = function () {
requestAnimationFrame( animate );
// During each animation frame, let's rotate the objects on their center axis,
// and also set the position of the epicyclic circle.
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
也欢迎其他任何建议/方法！ :D
Any other suggestions/Methods are welcomed too! :D
回顾:
- 如何在ThreeJs屏幕上显示P5js动画
- 如何使它们使用相同的坐标系(p5使用X和Y像素)
推荐答案
我更了解您的基本概念.信不信由你，超过50％的精力涉及解决与重叠的运动透明对象相关的抖动问题，该区域中three.js有点薄弱.但是，经过一些搜索后，可以通过调整对象的Z对齐方式和renderOrder来减轻抖动问题.
Dabbled a bit more with what I think is your basic concept. Believe it or not, more than 50% of the effort involved working around dithering issues associated with overlapping transparent objects in motion, an area where three.js is a bit weak. But, after a bit of searching, one can mitigate the dithering issues with adjustments to the Z alignment of the objects and the renderOrder.
无论如何，请看下面的代码，该代码会增加您的工作量，引入了5个随机大小且旋转的透明圆.对于画线，请查看以下链接 https: //threejs.org/docs/#manual/en/introduction/How-to-update-things .
In any event, take a look at the code below, which extends your effort, introducing 5 randomly sized and rotating transparent circles. For drawing lines, take a look at the following link https://threejs.org/docs/#manual/en/introduction/How-to-update-things .
<html>
<head>
<title>Epicyclic Circles</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script>
// Set up the basic scene, camera, and lights.
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
scene.add(camera)
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
camera.position.z = 200;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Add the orbit controls to permit viewing the scene from different angles via the mouse.
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.minDistance = 0;
controls.maxDistance = 500;
function createCircleMesh(plane, radius, depth, meshColor, meshOpacity) {
let extrudeSettings = { depth: depth, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: .25, bevelThickness: .25 };
let arcShape = new THREE.Shape();
arcShape.moveTo( 0, 0 );
arcShape.absarc( 0, 0, radius, 0, Math.PI * 2, false );
let holePath = new THREE.Path();
holePath.moveTo( 0, radius * 0.75 );
holePath.absarc( 0, radius * 0.75, radius * 0.20, 0, Math.PI * 2, true );
arcShape.holes.push( holePath );
var geometry = new THREE.ExtrudeBufferGeometry( arcShape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial({color: meshColor, roughness: 1, metalness: 0, transparent: meshOpacity !== 1, opacity: meshOpacity}) );
scene.add( mesh );
if (plane === "XZ") {
mesh.rotateX(Math.PI / 2);
} else if (plane === "YZ") {
mesh.rotateY(Math.PI / 2);
}
return mesh;
}
// Create an array of circles and their meshes.
circle = [];
for (let i = 0; i < 5; i++) {
let r = 5 - i;
circle[i] = {
radius: r*10 + Math.random() * r * 10,
rotationRate: (Math.random() * 2 * Math.PI - Math.PI) / 100
};
// RenderOrder is stepped to reduce dithering.
circle[i].mesh = createCircleMesh("XY", circle[i].radius, 5, 0xff0000, 0.5);
circle[i].mesh.renderOrder = i;
circle[i].centerMesh = createCircleMesh("XY", 5, 2, 0xff0000, 1);
if (i === 0) {
circle[i].centerX = circle[i].radius;
circle[i].centerY = circle[i].radius;
circle[i].centerZ = i; // Offset the meshes to reduce dithering.
} else {
circle[i].centerX = circle[i-1].centerX + circle[i-1].radius;
circle[i].centerY = circle[i-1].centerY;
circle[i].centerZ = i; // Offset the meshes to reduce dithering.
}
circle[i].rotated = 0;
}
// Set up "viewing" planes.
var plane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 );
var helper = new THREE.PlaneHelper( plane, 500, 0x696969 );
scene.add( helper );
var plane2 = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 );
var helper2 = new THREE.PlaneHelper( plane2, 500, 0xE06666 );
scene.add( helper2 );
var plane3 = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
var helper3 = new THREE.PlaneHelper( plane3, 500, 0xD85C6 );
scene.add( helper3 );
var size = 250;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );
var animate = function () {
requestAnimationFrame( animate );
// During each animation frame, let's rotate the objects.
for (let i = 0; i < 5; i++) {
let c = circle[i];
c.rotated += c.rotationRate;
if (0 < i) {
c.centerX = circle[i-1].centerX + circle[i-1].radius * Math.cos(circle[i-1].rotated);
c.centerY = circle[i-1].centerY + circle[i-1].radius * Math.sin(circle[i-1].rotated);
}
// Note that due to the stepping of the meshes to reduce dithering, it is necessary
// to alter the step (via Math.sign(camera.position.z)) if we're looking via the backside.
c.mesh.rotateZ(c.rotationRate);
c.mesh.position.set(c.centerX, c.centerY, c.centerZ * Math.sign(camera.position.z));
c.centerMesh.position.set(c.centerX, c.centerY, c.centerZ * Math.sign(camera.position.z));
}
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
与在Stackoverflow的小视口中相比，全屏显示效果更好.
This might look better full screen rather than in the small viewport within Stackoverflow.
希望这对您有所帮助.
这篇关于(集成P5.js和Three.js)---用P5.js库中的动画创建ThreeJS场景吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
