(Интегрируйте P5.JS и THRE.JS)-Создайте три JS-сцену с анимацией из библиотеки P5.JS? ⇐ Html

[Anonymous]

Прежде чем мы начнем, вы можете прочитать мой предыдущий пост, который приведет к созданию этого вопроса:







// 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();



< /code>

Любые другие предложения /методы также приветствуются! : D < /p>

Recap: < /p>


Как мне отобразить анимации P5JS на моем экране ThreeJs < /li>
Как я могу использовать одну и ту же систему координат (P5 использует x и y pixels) < /li>
< /> < /> < /> < />>

Подробнее здесь: https://stackoverflow.com/questions/571 ... tions-from