ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

那么大甜筒(Cones)

2020-02-05 11:01:27  阅读:390  来源: 互联网

标签:那么 甜筒 Cones THREE group mesh var new cupcake


那么大甜筒(Cones)

示例

在这里插入图片描述

CSS

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
}
canvas {
	width: 100%;
	height: 100%;
}

JS

// variable for  mesh object
var renderer, camera, scene;
var sphere;
var cone;
var cones = [];
var cupcakes = [];
var coneGroup = new THREE.Group();	
var targetRotation = 0;
var mouseX = 0;
var mouseY= 0;

init();

function init(){
	// set up ortho camera
	camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
	camera.zoom = 1.5;
	camera.updateProjectionMatrix();

	// create scene
	scene = new THREE.Scene();

	// add light 
	var ambientLight = new THREE.AmbientLight(0xffffbb, .6);
	scene.add(ambientLight);

	var light = new THREE.PointLight( 0xffffff, 1.5, 1500);
	light.position.set( 0, 500, 500 ); 
	scene.add( light );
	var lightTwo = new THREE.PointLight( 0xffffff, 1.5, 1500);
	lightTwo.position.set( 500, 500, 500 );
	scene.add( lightTwo );

	// create renderer
	renderer = new THREE.WebGLRenderer({alpha: true});
	renderer.setSize(window.innerWidth, window.innerHeight);
 
	// append it to the DOM
	document.body.appendChild(renderer.domElement);

	// load Blender mesh - cupcake
  var loader = new THREE.JSONLoader();
  loader.load('https://raw.githubusercontent.com/ellenprobst/sugar-3D/master/cupcake-lowpoly.json', generateMesh );
  
};


// generate cupcake mesh 
function generateMesh(geometry, material){
	geometry.computeVertexNormals();
    var cupcake = new THREE.Mesh(geometry, material);
    
		cupcake.position.y = 0;
		cupcake.position.z = 0;
		cupcake.rotation.z = randBetween(.0, .25);
		
		cupcake.scale.x = cupcake.scale.y = cupcake.scale.z = 70;
    cupcake.geometry.center();

		scene.add(cupcake);
		cupcakes.push( cupcake )
}

// create chocolate ice
var ice_choc = function(group) {

		var material = new THREE.MeshPhongMaterial({
			color: 0x3e1c12,
			specular: 0x3e3535
			});

		var geometry = new THREE.SphereGeometry(25,16,16);
		choc = new THREE.Mesh( geometry, material );
		choc.position.y = 25;
		choc.castShadow = true

		group.add( choc );
}


// create strawberry ice
var ice_straw = function(group) {
    var material = new THREE.MeshLambertMaterial({
        color: 0xf58acf
    });

		var geometry = new THREE.SphereGeometry(25,16,16);
		sphere = new THREE.Mesh( geometry, material );
		sphere.position.y = 25;
		sphere.castShadow = true

		group.add( sphere );	
}

// create cone 
var cone = function(group){	
    var material = new THREE.MeshLambertMaterial({
				color: 0xd77218
		});
  
		var geometry = new THREE.ConeGeometry( 26, 90, 16 );
		
    coneMesh = new THREE.Mesh(geometry, material);
		coneMesh.position.y = -20;
		coneMesh.rotation.x = ( Math.PI );

		group.add(coneMesh);
}

function randBetween(min, max) {
	return (Math.random() * (max - min)) + min;
}

// group cone and ice cream
function createGroup(ice) {
	var group = new THREE.Group();	
	var x = randBetween(-520,500),
		y = randBetween(-320,320),
		z = randBetween(-1000,-300);

	group.position.set(x,y,z);
	group.castShadow = true;
	group.scale.x = group.scale.y = group.scale.z = .5;
	
	ice(group);	
	cone(group);
	
	//randomize the rotation speed 
    group.rotateAt = randBetween(0.01, 0.03);	
    cones.push(group);
    coneGroup.add(group);
    scene.add( coneGroup );
}

for (var i = 0; i <= 25; i++) {
	createGroup(ice_straw);
	createGroup(ice_choc);
} 

// add eventlistener
document.addEventListener('mousemove', onm ouseMove, false);

// Follows the mouse event
function onm ouseMove(event) {
  event.preventDefault();
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
};
 
function render(){
	requestAnimationFrame( render );
	cones.forEach((mesh)=>{
		mesh.rotation.x += mesh.rotateAt;
		mesh.rotation.y += mesh.rotateAt;
		mesh.rotation.z += mesh.rotateAt;
	});
	
	cupcakes.forEach((mesh)=>{
		mesh.rotation.y = mouseX * 2;
		mesh.rotation.x = mouseY * 2;
	});
  
	renderer.render( scene,camera );
}

render();
盈嘉小红砖(同公众号) 发布了117 篇原创文章 · 获赞 54 · 访问量 8605 私信 关注

标签:那么,甜筒,Cones,THREE,group,mesh,var,new,cupcake
来源: https://blog.csdn.net/weixin_45544796/article/details/104179272

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有