JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/examples/js/controls/OrbitControls.js"></script>
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setClearColor(0x010101, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function () {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
// figura
var geometry = new THREE.SphereGeometry(10, 32, 32);
var geometry1 = new THREE.SphereGeometry(0.5, 32, 32);
var geometry2 = new THREE.SphereGeometry(1, 32, 32);
var geometry3 = new THREE.SphereGeometry(2, 32, 32);
var material1 = new THREE.MeshBasicMaterial({
color: 0xcc1c1c,
wireframe: true
});
var material2 = new THREE.MeshBasicMaterial({
color: 0xcc1c8e,
wireframe: true
});
var material3 = new THREE.MeshBasicMaterial({
color: 0x8c15db,
wireframe: true
});
var material4 = new THREE.MeshBasicMaterial({
color: 0x2c15d8,
wireframe: true
});
var material5 = new THREE.MeshBasicMaterial({
color: 0x1555d6,
wireframe: true
});
var figura1 = new THREE.Mesh(geometry1, material1);
var figura2 = new THREE.Mesh(geometry2, material2);
var figura3 = new THREE.Mesh(geometry3, material3);
var figura4 = new THREE.Mesh(geometry, material4);
var figura5 = new THREE.Mesh(geometry, material5);
var figura6 = new THREE.Mesh(geometry, material1);
scene.add(figura1, figura2);
camera.position.z = 3;
// lĂłgica del programa
var update = function () {
figura1.rotation.x += 0.00100;
figura1.rotation.y += 0.00010;
figura1.rotation.z += 0.00001;
figura2.rotation.x -= 0.00001;
figura2.rotation.y -= 0.00010;
figura2.rotation.z...