更多有趣示例 尽在小红砖社区
示例
HTML
<body>
<div id='container'></div>
</body>
CSS
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
canvas:not(#p5Canvas) {
width: 100%;
height: 100%;
}
#container {
background: red;
display: flex;
}
JS
// Create an empty scene
const scene = new THREE.Scene();
// Create a basic perspective camera
const camera = new THREE.PerspectiveCamera( 120, 1280 / 720, 0.1, 1000 );
camera.position.z = 4;
// Create a renderer with Antialiasing
const renderer = new THREE.WebGLRenderer({ antialias:true });
// Configure renderer clear color
renderer.setClearColor("#000000");
// Configure renderer size
renderer.setSize( 1280, 720 );
// Append Renderer to DOM
document.body.appendChild( renderer.domElement );
const geometry = new THREE.TorusGeometry( 12, 8, 100, 100 );
const material = new THREE.MeshBasicMaterial( { side: THREE.BackSide } );
//new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.BackSide } )
const torus = new THREE.Mesh( geometry, material );
torus.position.z = -5;
torus.position.y = 2;
torus.rotation.x = Math.PI * 0.5 - 0.1;
scene.add( torus );
const textureLoader = new THREE.TextureLoader();
const textureUpdate = function (canvasData) {
const text = new THREE.TextureLoader().load(canvasData, function () {
text.wrapS = text.wrapT = THREE.RepeatWrapping;
text.offset.set( 0, 0 );
text.repeat.set( 75, 55 );
torus.material.map = text;
// render once the texture loads
renderer.render(scene, camera);
});
}
let sketch = function(p) {
let squareScale = 1;
let squareRotation = 0;
let midX, midY;
let reset = false;
p.setup = function(){
p.frameRate(60);
const canvas = p.createCanvas(256, 256);
canvas.id('p5Canvas');
p.rectMode(p.CENTER);
midX = p.width * 0.5;
midY = p.height * 0.5;
}
p.draw = function() {
p.background(0);
// p.noStroke();
// p.fill('#1f65b3');
// p.ellipse(0, 0, 55, 55);
// p.ellipse(p.width, 0, 55, 55);
// p.ellipse(p.width, p.height, 55, 55);
// p.ellipse(0, p.height, 55, 55);
// p.fill('#1fbdff');
// p.ellipse(0, 0, 40, 40);
// p.ellipse(p.width, 0, 40, 40);
// p.ellipse(p.width, p.height, 40, 40);
// p.ellipse(0, p.height, 40, 40);
// p.fill('#ff3713');
// p.rect(22, 22, p.width - 44, p.height - 44);
// p.fill('#ff8f13');
// p.rect(50, 50, p.width - 100, p.height - 100);
// p.fill('#fffb00');
// p.rect(80, 80, p.width - 160, p.height - 160);
// p.fill('#00ff8d');
// p.rect(110, 100, p.width - 220, p.height - 200);
p.push();
p.translate(midX, midY);
p.rotate(squareRotation);
p.rect(0, 0, p.width * squareScale, p.height * squareScale);
p.pop();
if(!reset && squareScale > 0.75) {
squareScale -= 0.001;
} else if(!reset && squareRotation < p.QUARTER_PI) {
squareRotation += 0.01;
} else if(!reset && squareScale > 0) {
squareScale -= 0.005;
} else if(squareScale < 0.75) {
reset = true;
squareScale += 0.005;
} else if(squareRotation > 0) {
squareRotation -= 0.01;
} else if(squareScale < 1) {
squareScale += 0.005;
} else {
reset = false;
}
textureUpdate(p.canvas.toDataURL());
}
};
new p5(sketch, 'container');