天然颗粒

最新推荐文章于 2022-03-08 11:04:18 发布

Super_Calvin

最新推荐文章于 2022-03-08 11:04:18 发布

阅读量143

点赞数

分类专栏： # 几何图形文章标签：天然颗粒

本文链接：https://blog.csdn.net/weixin_45544796/article/details/109649010

版权

几何图形专栏收录该内容

89 篇文章 2 订阅

订阅专栏

天然颗粒

示例
HTML
CSS
JS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ThreeJS Spinning Cube</title>
	</head>
	<body>

	</body>
</html>

CSS

body { margin: 0; }
			canvas { width: 80%; height: 80% }

JS

// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0, 1);

// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        // position and point the camera to the center of the scene
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 200;

// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

// add the output of the renderer to the html element
document.body.appendChild( renderer.domElement );

// add light to the scene
    const color = 0xDC143C;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);

function createParticles() {


            var geom = new THREE.Geometry();
            var material = new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff});

            for (var x = -5; x < 5; x++) {
                for (var y = -5; y < 5; y++) {
                    var particle = new THREE.Vector3(x * 10, y * 10, 0);
                    geom.vertices.push(particle);
                    geom.colors.push(new THREE.Color(Math.random() * 0xDC143C));
                }
            }

            var cloud = new THREE.PointCloud(geom, material);
            scene.add(cloud);
        }
// create a cube
// var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// var material = new THREE.MeshLambertMaterial({color: 0xff0000});
// var cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
createParticles();



function animate() {
	requestAnimationFrame( animate );
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
  renderer.render( scene, camera );
}
animate();

Super_Calvin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
天然颗粒

天然颗粒示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0; }
复制链接

扫一扫