探索nunustudio 开发3D模型 第一弹:几何体着色

前言:nunustudio 官方网址http://nunustudio.org/     

1、先看下基础页面

2、给 正方体实现着色

2-1、第一种方式 点击界面下 【materal】根据自己意愿选择材质,选择后在下面的面板会出现所选择的材质,这个材质可以自定义名称,双击 选择的材质你会看到如下界面

这时候就可以设置色值。设置完毕之后,就可以把当前材质应用到你的几何体,直接点击选中,拖到场景中几何体上就可以完成着色效果。

2-2、第二种方式,js 实现着色,当前工程添加js模块,如图:

这时候在工具界面右侧就出现js 的标签,双击进入,可以看到两个函数。

function initialize()
{
	//TODO <INITIALIZATION CODE>
}

function update(delta)
{
	//TODO <UPDATE CODE>
}

第一个函数:初始化

第二个函数:循环函数(频繁刷新的函数)

这时候可以在控制台 console.log(this),this 指当前js对象。

使用scene 这个class,根据名称 获取对象,这里我们获取正方体对象实现着色,

function initialize()
{
	//TODO <INITIALIZATION CODE>
	console.log(this);
	var box=scene.getObjectByName('box');
	console.log(box);
	
}

控制输出一下,可以看到正确获取box对象,其中box名称可以自定义,这里注意工程中的几何元素名称一定要唯一。

展开对象可以看到这几个属性,所以我们可以自定义色值

function initialize()
{
	//TODO <INITIALIZATION CODE>
	console.log(this);
	var box=scene.getObjectByName('box');
	console.log(box);
	var color=new THREE.Color(0xfff000);
	box.material.color=color;
	
}

由于这个工具是在three.js基础上构建的,所以这里可以参考three.js的api文档=== http://www.webgl3d.cn/threejs/docs/

点击工具界面 【run】就可以看到最终的实现效果。

3、查看控制台,直接在js编辑界面 点击F12 。

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值