扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
keyshot模型库在材质文件的话就放在安装目录的library\materialpreview文件夹里,要是整个的C4D工程的话可以直接使用。
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了潞州免费建站欢迎大家使用!
lib4d格式的文件是预置文件可以放在library\browser这个文件夹里,至于png素材可以直接使用在贴图等上面的,放哪个文件夹都行。
以表盘玻璃为例来讲述keyshot渲染器渲染玻璃材质的参数和方法,在建模阶段,我们需要把不同材质分为不同图层,这样到时候添加玻璃材质的时候比较快。
KeyShotVR:
KeyShot 3.3采用了一种还尚未申请专利的全新技术,可在网页上展示产品。KeyShotVRTM能够将产品以互动3D的形式展示出来,任何网页浏览器只要安装了HTML5就可以观看到,这也包括移动设备,不需要再安装任何特殊插件。
KeyShotVR是一个可选的扩展软件,可以引进一个额外的渲染选项,它的设置能够创建四种不同的VR类型,产生可移植在任何一个网页的触控3D体验。
这么巧啊,我也在学html5。如果你不嫌我的代码的话,可以看看我写的时钟。
!DOCTYPE html
html
body
canvas id="canvas" width="500" height="500"
您的浏览器不支持canvas标签
/canvas
/body
script type="text/javascript"
//让时针和分针动起来
setInterval("timer()", 1000);
var clock = document.getElementById("canvas");
var cxt = clock.getContext("2d");
timer();
function timer(){
cxt.clearRect(0, 0, 500, 500);
var now = new Date();
var second = now.getSeconds();
var minute = now.getMinutes();
var hour = now.getHours();
hour = (hour 12) ? hour-12 : hour;
//表盘(蓝色边框)
cxt.lineWidth = 10; //设置笔触大小
cxt.strokeStyle = "blue"; //设置笔触颜色
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false); //设置外框的大小
cxt.closePath();
cxt.stroke();
//时刻度
for(var i=0; i12; i++)
{
cxt.save();
//开始画刻度
cxt.lineWidth = 7; //矫正cxt的的刻度代销和颜色
cxt.strokeStyle = "#000";
cxt.translate(250, 250); //设置异次元空间的0,0
//计算每次旋转的弧度,角度*Math.PI/180
cxt.rotate(i*30*Math.PI/180);
//开始画时针的线
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -195);
cxt.closePath()
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0; i60; i++)
{
cxt.save();
//开始画刻度
cxt.lineWidth = 5; //矫正cxt的的刻度代销和颜色
cxt.strokeStyle = "#000";
cxt.translate(250, 250); //设置异次元空间的0,0
//计算每次旋转的弧度,角度*Math.PI/180
cxt.rotate(i*6*Math.PI/180);
//开始画时针的线
cxt.beginPath();
cxt.moveTo(0, -190);
cxt.lineTo(0, -195);
cxt.closePath()
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.translate(250,250);
cxt.rotate((hour+minute/60)*30*Math.PI/180);
//设置时针风格
cxt.lineWidth = 8;
cxt.strokeStyle = "#000";
cxt.beginPath();
cxt.moveTo(0, -130); //起点为时针顶点位置
cxt.lineTo(0, 10); //超过圆心一点更美观
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
//设置分针风格
cxt.lineWidth = 5;
cxt.strokeStyle = "#333";
cxt.beginPath();
cxt.moveTo(0, -150); //起点为时针顶点位置
cxt.lineTo(0, 10); //超过圆心一点更美观
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//设置秒针风格
cxt.strokeStyle = "red";
cxt.lineWidth = 3;
cxt.translate(250, 250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -175);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
//画一个圆形,覆盖圆心
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.fillStyle = "gray";
cxt.fill();
//设置笔触样式
cxt.stroke();
cxt.closePath();
//画另一个圆形,添加到秒针的头部
cxt.beginPath();
cxt.arc(0,-150,6,0,360,false);
cxt.fillStyle = "#fff";
cxt.fill();
//设置笔触样式
cxt.stroke();
cxt.closePath();
cxt.restore();
//增加小时数字刻度
cxt.lineWidth = 1;
cxt.font = "20px 宋体";
//cxt.strokeStyle = "#369";
for(var i=0; i12; i++)
{
//每次开启一个异次元空间,写下数字,旋转30度即可
cxt.save();
cxt.translate(250, 250);
var num = i == 0 ? 12 : i;
cxt.rotate(i*30*Math.PI/180);
var position_x = (num 9) ? -10 : -5;
cxt.strokeText(num, position_x, -165);
cxt.restore();
}
}
/script
/html
只要你不顾浏览器兼容性,这些东西都可以做出来,但是只有一个或者几个浏览器可以显示
以画布的中心为原点,判断手指在画布中的坐标,算出角度,然后根据角度画圆。如果你不是用在手机,还可以用html5的拖放效果来实现
代码:
var clock=document.getElementById("clock");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour12?hour-12:hour;
hour=hour+min/60;
//表盘(蓝色)
cxt.lineWidth=10;
cxt.strokeStyle="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i12;i++){
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);//旋转角度 角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i60;i++){
cxt.save();
//设置分刻度的粗细
cxt.lineWidth=5;
//重置画布原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分针刻度
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
// 设置时针风格
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//设置异次元空间分针画布的中心
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke()
cxt.restore();
//秒针
cxt.save();
//设置秒针的风格
//颜色:红色
cxt.strokeStyle="red";
cxt.lineWidth=3;
//重置原点
cxt.translate(250,250);
//设置角度
//cxt.rotate(330*Math.PI/180);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针,分针,秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();
//画出秒针的小圆点
cxt.beginPath();
cxt.arc(0,-140,5,0,360,false);
cxt.closePath();
//设置填充
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();/p
p cxt.restore();/p
p}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock,1000);
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流